<template>
  <div class="login">
    <div class="header">
      <router-link tag="span" to="/my" class="iconfont icon-zuojiantou"></router-link>
    </div>
    <div class="content">
      <div class="title">登录</div>
      <input type="text" placeholder="手机号码(+86)" v-model="phone"/>
      <input type="password" placeholder="输入密码" v-model="password"/>
      <div class="sign" @click="submit">登录</div>
    </div>

    <div class="footer">
      <p>立即注册</p>
      <p>忘记密码</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      prevPath: "",
    };
  },
  
  methods: {
    submit() {
      //验证手机号与密码
      //1.验证手机号码
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      //2.验证密码
      let pass = /^\d{6,}$/; //至少6位的数字
      if (!reg.test(this.phone) || !pass.test(this.password)) {
        this.$toast("请输入正确的手机号与密码");
        return;
      }

      window.localStorage.setItem("token", "token值");
      window.localStorage.setItem("userId", "Alex");
      this.$toast("登录成功");
      this.$router.back();
    },
    
  },
};
</script>

<style lang="scss" scoped>
.login {
  .header {
    padding: 0px 12px;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #f5f5f5;
    span {
      font-size: 22px;
      color: #333;
      font-weight: bold;
    }
  }
  .content {
    padding: 0px 12px;
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      color: #333;
      margin: 25px 0px;
      text-align: center;
      font-weight: bold;
    }
    input,.sign{
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding: 0px 15px;
      font-size: 14px;
      color: #666;
      border-radius: 25px;
      border: 2px solid gray;
      margin-bottom: 15px;
      caret-color: #fc7268;
    }
    .sign{
        text-align: center;
        color: #fff;
        font-weight: bold;
        background-color: #fc7268;
        border: none;
    }
  }
  .footer{
    padding: 0px 12px;
    display: flex;
    justify-content: space-between;
    p{
        font-size: 14px;
        color: #fc7268;
        
    }
  }
}
</style>